/*
* @Author: Yejing
* @Date: 2023-05-29 18:19:38
* @LastEditors: WangXi
* @LastEditTime: 2023-07-05 15:08:15
* @Description: 主播首页
*/
<template>
	<view class="anchor-homepage">
		<c-layout @getNewsData="getNewsData">
			<!-- 头部 -->
			<c-navigation-bar slot="head" navbar-bg-color="#1B1D29" :isSearch="false" :isRightIcon="true"
				left-icon-border="#E1E8E8" left-icon-color="#fff">
				<template slot="rightIcon">
					<image v-if="followUrlData.type == 'hot'" style="width: 50rpx;" :src="sendSvg" mode=""></image>
			
				</template>
			</c-navigation-bar>

			<!--内容-->
			<view class="container-box">
				<view class="head-suspension">
					<u-avatar :src="$u.file.getMedieUrl(vuex_anchor_info.anchorAvatar||vuex_anchor_info.avatar)" shape="circle"
						size="200" :show-level='true' :level-icon='cameraFill' level-bg-color='#fff'>
					</u-avatar>
					<text class="name">{{ vuex_anchor_info.nickName }}</text>
					<text class="ID">UID:{{ vuex_anchor_info.newUserRandomId}}</text>
					<view class="data" :style="{'justify-content':followUrlData.type=='outSide'?'center':''}">
						<view class="num" @click="goVisitorClick('concerns',vuex_user_info.concern)"
							v-if="followUrlData.type!='outSide'">
							<text>{{ vuex_user_info.concern }}</text>
							<text>{{$t('storeOfInterest.concern')}}</text>
						</view>
						<view class="num" @click="goFansClick('fans',vuex_anchor_info.fans)">
							<text>{{ vuex_anchor_info.fans }}</text>
							<text>{{$t('storeOfInterest.fans')}}</text>
						</view>
						<view class="num" @click="goVideo('like',vuex_user_info.like)" v-if="followUrlData.type!='outSide'">
							<text>{{ vuex_user_info.like }}</text>
							<text>{{$t('storeOfInterest.like')}}</text>
						</view>
					</view>
					<!-- 分类 -->
					<view class="container-tabs">
						<u-button @click="attentionClik" v-if="followUrlData.type == 'hot'" type="primary" :ripple="true"
							ripple-bg-color="#2934D0"
							:style="{width:'670rpx', height: '100rpx',borderRadius: '20rpx',background:'#2934D0'}">
							<!-- <u-icon name="checkbox-mark" style="margin-right: 15rpx;"></u-icon> -->
							{{$t('storeOfInterest.concern')}}
						</u-button>
						<u-tabs v-else class="tabs-type-blue" :list="followUrlData.type=='outSide'?tabsType.list2:tabsType.list"
							:active-item-style='tabsType.activeItem' :show-bar='false' :is-scroll="true" :current="tabsType.current"
							@change="changeTabs">
						</u-tabs>

						<view class="tabs">
							<!-- 分类区 -->
							<view class="tabs-info">
								<view v-if="tabsType.current == 0">

								</view>
								<!--作品-->
								<view v-if="tabsType.current == 1">
									<view class="works">
										<view class="item" v-for="(card,index) in tabsType.works.data" :key="card.id">
											<videoCard :details="{...card,img:$u.appImage.getOssVideoCover(card.url)}"
												@videoInfo='videoInfo(index)'></videoCard>
										</view>
										<!-- <view v-if="(tabsType.works.data.length%3) === 2" class="item" style="width:217rpx; height:217rpx">
										</view> -->
									</view>
								</view>
								<view v-if="tabsType.current == 2">
									<u-tabs :list="tabsType.shops.list" :active-item-style='tabsType.shops.activeItem' :is-scroll="true"
										:bar-style='tabsType.shops.barStyle' :current="tabsType.shops.current" @change="changeShopTabs">
									</u-tabs>
								</view>
								<view v-if="tabsType.current == 3">
									<view class="works">
										<view class="item" v-for="(card,index) in tabsType.works.data" :key="card.id">
											<videoCard :details="{...card,img:$u.appImage.getOssVideoCover(card.url)}"
												@videoInfo='videoInfo(index)'></videoCard>
										</view>
									</view>
								</view>
							</view>

							<!-- 商铺信息 -->
							<view class="shops-info">
								<!-- 商品 -->
								<view style="overflow-x: hidden"
									v-if="tabsType.shops.current == 0 && tabsType.current == 0 && tabsType.shops.bestList">
									<text class="best-title">{{$t('storeOfInterest.NewArrived')}}</text>
									<view class="swiper">
										<swiper v-if="tabsType.shops.shops.swiperList.length" circular :autoplay="true"
											:indicator-dots="true" :interval="5000" :duration="1000" indicator-color='#F5F6F8'
											indicator-active-color='#2934D0'>
											<swiper-item v-for="(item,index) in tabsType.shops.shops.swiperList" :key="item.id"
												@click="$u.route('/pages/productDetails/productDetails',{productId:item.id})">
												<u-image :src="$u.file.getMedieUrl(item.image)" width="486rpx" height="352rpx"></u-image>
												<view class="shops-msg box">
													<view class="left">
														<text>{{ item.goodsName }}</text>
														<view class="desc">{{ item.goodsDesc }}</view>
														<text>${{ publicJS.toFixed(item.price)}}</text>
													</view>
													<view class="right">

														<text>
															<u-icon name="arrow-right" color="#fff" size="24"></u-icon>
														</text>
													</view>
												</view>
											</swiper-item>
										</swiper>
										<view class="empty-box no-text" v-else>
											<u-empty text="" mode="data"></u-empty>
										</view>
									</view>

									<text class="best-title">{{$t('storeOfInterest.AlreadyListed')}}</text>
									<view class="swiper">
										<template v-if="tabsType.shops.bestList.length">
											<view v-for="item in tabsType.shops.bestList" :key="item.id"
												@click="$u.route('/pages/productDetails/productDetails',{productId:item.id})">
												<lineProductCard :card="{...item,image:$u.file.getMedieUrl(item.image)}">
												</lineProductCard>
											</view>
										</template>
										<view class="empty-box no-text" v-else>
											<u-empty text="" mode="data"></u-empty>
										</view>
									</view>
								</view>
					
								<template
									v-if=" (tabsType.current == 0 && tabsType.shops.current == 1 && tabsType.works.data) ||( tabsType.current == 2 && tabsType.shops.current == 1)||( tabsType.current == 4)||(tabsType.shops.current == 1 && tabsType.current == 2)">
									<view class="works">
										<view class="item" v-for="(card,index) in tabsType.works.data" :key="card.id">
											<videoCard :details="{...card,img:$u.appImage.getOssVideoCover(card.url)}"
												@videoInfo='videoInfo(index)'></videoCard>
										</view>
									</view>
									<view class="empty-box" v-if="!tabsType.works.data.length">
										<u-empty text="没有收藏" mode="favor"></u-empty>
									</view>
								</template>
								<!-- 视频 -->

								<view v-if="tabsType.shops.current == 0 && tabsType.current == 2">
									<waterfallView>
										<view class="item" v-for="(card,index) in tabsType.collection.data" :key="index">
											<productCard
												@click="$u.route('/pages/productDetails/productDetails',{productId:card.shopGoodsId})"
												:details="{...card,}" type="center" :heartFill='true'></productCard>
										</view>
										<view class="empty-box" v-if="!tabsType.collection.data.length">
											<u-empty text="没有收藏" mode="favor"></u-empty>
										</view>
									</waterfallView>
								</view>
								<!-- 空 -->
								<view class="empty" v-show="empty.show">
									<image style="height:140rpx;" src="@/static/svg/wjj.svg" />
									<text>{{ empty.title }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</c-layout>


		<!-- 视频弹框 -->
		<u-popup v-model="video.show" mode="center">
			<video :id="video.id" :src="$u.file.getMedieUrl(video.url)" enable-danmu danmu-btn controls></video>
		</u-popup>

		<!-- <u-popup class="share-pop" v-model="sharePopShow" mode="bottom" border-radius="60">
            <view class="share-main">
                <view class="othen-way">
                    <imageForSize v-for="img in imgGroup" size="134" :src="img"></imageForSize>
                </view>
                <view class="friends">
                    <listItem v-for="(item, index) in friendList" :time="item.des" :key="index" :name="item.name"
                              :src="imgGroup[1]">
                        <u-button type=primary plain size=mini class="slot-btn" slot="btn">send</u-button>
                    </listItem>
                </view>
            </view>
        </u-popup> -->
		<c-share v-model="sharePopShow" :data="shareData"></c-share>
	</view>
</template>

<script>
	import bubble from "../../bubble.vue"
	import lineProductCard from "../../productCard.vue"

	export default {
		components: {
			bubble,
			lineProductCard
		},
		data() {
			return {
				cameraFill: require('static/images/icon-avator-home.png'),
				imgGroup: [require('static/images/login/ins.png'), require('static/images/login/facebook.png'), require(
					'static/images/login/tiktok.png'), require('static/images/login/YouTube.png')],
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle'
				},
				tabsType: {
					list: [{
						name: this.$t('storeOfInterest.shops')
					}, {
						name: this.$t('storeOfInterest.works')
					}, {
						name: this.$t('storeOfInterest.collet')
					}, ],
					list2: [{
						name: this.$t('storeOfInterest.shops')
					}, {
						name: this.$t('storeOfInterest.works')
					}],
					current: 0,
					activeItem: {
						'background': '#2934D0',
						'color': '#fff !important'
					},
					shops: {
						list: [{
							name: this.$t('storeOfInterest.shops')
						}, {
							name: this.$t('storeOfInterest.works')
						}],
						current: 0,
						activeItem: {
							'color': '#1B1D29 !important',
							'fontSize': '20px !important',
						},
						barStyle: {
							'background': '#2934D0',
							'height': '3px',
							'width': '8px'
						},
						shops: {
							swiperList: [],
							titleStyle: {
								'background': '#2934D0'
							}
						},
						bestList: [],
					},
				
					works: {
						data: []
					},
					collection: {
						data: [],
					}
				},
				video: {
					show: false,
					id: '',
					url: '',
				},
				followUrlData: {},
				//更多
				bubble: {
					data: [
						//               { // 7-17 取消主播编辑信息的功能
						//                   text: '编辑',
						//                   icon: 'edit-pen',
						//                   url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/edit',
						// data:{
						// 	type:1
						// }
						//               }, 
						// { 7-13  废弃分享码
						//                    text: '分享码',
						//                    icon: 'grid',
						//                    url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/qrCode',
						//                }, 
						{
							text: this.$t('system.visitor'),
							icon: 'account',
							url: '/pages/public/visitor/visitor',
							data: {
								title: this.$t('system.visitor'),
								title1: 'Business visitors',
								title2: 'Visitor visit',
								type: 'bubble'
							}
						}, {
							text: this.$t('system.share'),
							icon: 'share',
						}
					]
				},
				bubble2: {
					data: [{
						text: this.$t('system.ShareCode'),
						icon: 'grid',
						url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/qrCode',
					}]
				},
				sharePopShow: false,
				friendList: [],
				sendSvg: require('@/static/images/send.svg'),
				pagingObj: {
					pageSize: 20,
					pageNum: 1
				},
				paging: {
					current: 1,
					size: 10
				},
				empty: {
					show: false,
					img: '',
					title: '',
					hint: '',
					buttonText: ''
				},
				total: 0

			}

		},
		computed: {
			screenHeight() {
				return this.$store.getters.homePageWindowInfo.screenHeight
			},
			// 分享数据
			shareData() {
				console.log(this.vuex_anchor_info, 5648651);
				return {
					// this.vuex_user_info.id
					id: '',
					name: `anchorHome`,
					url: `/pages/searchInfo/components/anchorCard/anchorHomepage?type=outSide&userId=${this.vuex_anchor_info.userId||''}`,
					p: {
						'type': 'outSide',
						"userId": this.vuex_anchor_info.userId
					}
				}
			}
		},
		onLoad(data) {
			if (data.type === 'outSide') {

				this.browseAnchorAjax(data.anchorId || data.userId)
			}
			this.followUrlData = data
		this.$u.get('/app/shop-level/' + this.vuex_user_info.level).then((res) => {
				this.cameraFill = this.$u.file.getMedieUrl(res.data.icon)
			});
			this.getShopProduct(this.paging)
			this.getNewProduct(this.paging)
			console.log(this.vuex_anchor_info)
		},
		mounted() {
			this.followUrlData = {
				...this.followUrlData
			}
			console.log(this.followUrlData)
		},
		methods: {
			//切换
			changeTabs(index) {
				this.tabsType.current = index;
				this.tabsType.shops.current = 0
				this.pagingObj.pageNum = 1 //防止数据错乱
				delete this.pagingObj.id
				delete this.pagingObj.userId
				delete this.pagingObj.type
				this.empty.show = false
				let url = ''
				switch (this.tabsType.current) {
					// 获取作品
					case 1:
						url = '/app/short/video/recommendedList'
						this.pagingObj.id = this.vuex_anchor_info.userId
						break;
						//获取浏览记录
					case 4:
						url = '/app/short/video/history/page'
				}
				//获取视频数据
				if (this.tabsType.current == 1 || this.tabsType.current == 4) {
					this.$u.post(url, this.pagingObj).then(res => {
						this.tabsType.works.data = res.data.records
						if (this.tabsType.works.data.length == 0) {
							this.empty = {
								show: true,
								title: this.$t('storeOfInterest.noVideo'),
								hint: this.$t('storeOfInterest.activateFirst'),
							}
						}
					});
				}
				//获取店铺信息
				if (this.tabsType.current == 0) {

				}
				//获取收藏
				if (this.tabsType.current == 2) {
					this.pagingObj.userId = this.vuex_anchor_info.userId
					this.getInterest(this.pagingObj)
				}
				//获取点赞视频
				if (this.tabsType.current == 3) {
					this.pagingObj.id = this.vuex_anchor_info.userId
					this.getCorLVideo(this.pagingObj, 'like')
				}
			},
			//获取点赞或收藏的视频
			getCorLVideo(pagingObj, type) {
				this.$u.post('app/short/user/page/' + type, pagingObj).then(res => {
					if (res.data.records.length > 0) {
						this.tabsType.works.data = [...this.tabsType.works.data, ...res.data.records].filter(
							function(element, index, self) {
								return self.findIndex(el => el.id == element.id) === index
							})
					} else {
						this.tabsType.works.data = []
					}
					this.total = res.data.total


				})
			},
			//商铺切换
			changeShopTabs(index) {
				this.tabsType.shops.current = index;
				//搜藏的视频
				if (this.tabsType.shops.current == 1 && this.tabsType.current == 2) {
					this.pagingObj.id = this.vuex_anchor_info.userId
					this.getCorLVideo(this.pagingObj, 1)
				}

			},
			videoInfo(index) {
				this.$u.vuex('vuex_video_record', {
					list: this.tabsType.works.data,
					index: index,
					show: true
				})
				uni.navigateTo({
					url: "/pages/public/recordVideo/recordVideo",
					"animationType": "slide-in-right",
					"animationDuration": 300
				})
			},
			//点击更右上角更多图标
			bubbleLineClick(item, index) {
				if (item.url) {
					if (item.url) {
						console.log(item.url);
						this.$u.route({
							url: item.url,
							params: item.data
						})
					}
				}
				console.log(666, 99, item);
				if (item.icon == 'share') {
					this.sharePopShow = true
				}
			},

			//点击关注
			attentionClik() {

			},
			//点击统计跳转
			goFansClick(type, num) {
				if (num > 0) {
					uni.navigateTo({
						url:'/pages/anchorConsole/page/fansClub?anchorId='+this.vuex_anchor_info.userId
					})
				}
			},
			//点击点赞
			goVideo(type, num) {
				if (num > 0) {
					this.$u.route('pages/searchInfo/components/anchorCard/anchorHomepage/page/video', {
						type: type
					})
				}
			},
			//获取最新
			getNewProduct(paging) {
				paging.new = true
				this.getShopProduct(paging)
			},
			//获取店铺商品
			getShopProduct(paging) {
				// new
				if (this.vuex_anchor_info.shopId) {
					console.log(this.vuex_anchor_info.shopId)
					this.paging.shopId = this.vuex_anchor_info.shopId
					this.$u.post('app/shopGoodsInfo/useraLLpage', paging).then(res => {
						if (res.data.records.length > 0) {
							this.tabsType.shops.bestList = [...this.tabsType.shops.bestList, ...res.data.records]
								.filter(function(element, index, self) {
									return self.findIndex(el => el.id == element.id) === index
								})
							this.tabsType.shops.shops.swiperList = res.data.records
						} else {
							this.tabsType.shops.bestList = []
						}
						this.total = res.data.total
					})
				} else {
					console.log(2222, this.vuex_anchor_info)
				}
			},
	
			//获取收藏
			getInterest(pagingObj) {
				this.$u.post('/app/shop/interestShopGoods/page', pagingObj).then(res => {
					if (res.data.records.length > 0) {
						this.tabsType.collection.data = [...this.tabsType.collection.data, ...res.data.records]
							.filter(function(element, index, self) {
								return self.findIndex(el => el.shopGoodsId == element.shopGoodsId) === index
							})
					} else {
						this.tabsType.collection.data = []
					}
					this.total = res.data.nextPage
				})
			},
			//分页
			getNewsData() {
				//店铺信息
				if (this.tabsType.current == 0) {
					if (this.tabsType.shops.bestList.length == this.total) {
						return
					}
					this.paging.current += 1
					this.getShopProduct(this.paging)
				}
				if (this.tabsType.current == 2) {
					if (this.total == 0) {
						return
					}
					this.pagingObj.pageNum += 1
					this.getInterest(this.pagingObj)
				}

				if (this.tabsType.current == 3) {
					if (this.tabsType.works.data.length == this.total) {
						return
					}
					this.pagingObj.pageNum += 1
					this.getCorLVideo(this.pagingObj, 'like')
				}
			},
			// 浏览主播
			browseAnchorAjax(anchorId) {
				this.$u.post('/app/anchorAccessRecord/visit/' + (this.vuex_anchor_info.anchorId || anchorId))
			},
			// 通过id获取主播信息
			getAnchorInfoByIdAjax(id) {
				this.$u.get('/app/anchor/anchorInfo/' + id).then(res => {
					this.$u.vuex('vuex_anchor_info', res.data)
				}).catch(err => {
					setTimeout((() => {
						this.publicJS.backOption()
					}), 1000);
				})
			}
		},

		//离开页面关闭气泡
		// onHide(type) {
		//     this.$refs.bubble.moreClick()
		// }
	}
</script>

<style lang="scss" scoped>
	.empty-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		&.no-text {
			/deep/ .u-icon__label {
				display: none;
			}
		}
	}

	.anchor-homepage {
		background-color: #1B1D29;
		position: relative;
		width: 100vw;
		min-height: 100vh;
		font-family: PingFang SC;

		.container-box {
			padding-top: 160rpx;
			position: relative;
			min-height: 100%;
			display: flex;
			flex-direction: column;

			.head-suspension {
				flex: 1;
				display: flex;
				flex-direction: column;
				background-color: #fff;
				width: 100%;
				border-radius: 60rpx 60rpx 0rpx 0rpx;
				padding: 150rpx 40rpx 0 40rpx;
				position: relative;

				.u-avatar {
					position: absolute;
					top: -95rpx;
					left: 50%;
					transform: translateX(-50%);

					///deep/ .u-avatar__img {
					//	border-radius: 40rpx !important;
					//}

					/deep/ .u-avatar__level {
						right: 15rpx !important;
						bottom: 20rpx !important;
					}

					/deep/ .u-iconfont {
						font-size: 50rpx !important;
						right: 0;
						color: #35E8F7;
					}
				}

				.name {
					display: block;
					color: #02010E;
					font-size: 48rpx;
					text-align: center;
				}

				.ID {
					display: block;
					text-align: center;
					color: #91909A;
					font-size: 32rpx;
					margin: 10rpx 0 66rpx 0;
				}

				.data {
					display: flex;
					justify-content: space-between;

					.num {
						width: 30%;

						uni-text {
							color: #02010E;
							font-size: 40rpx;
							display: block;
							text-align: center;

							&:nth-child(2) {
								margin-top: 10rpx;
								color: #91909A;
								font-size: 28rpx;
							}
						}
					}
				}

				.container-tabs {
					margin-top: 66rpx;
					flex: 1;
					display: flex;
					flex-direction: column;

					.tabs-info {
						margin-top: 66rpx;

						/deep/ .u-scroll-box {
							.u-line-1 {
								line-height: 48rpx !important;
								width: auto !important;
								height: 48rpx !important;
								background-color: transparent;
								color: #C9C9C9 !important;
								border-radius: 20rpx;
								margin-right: 0rpx;
								font-size: 32rpx !important;
								padding-bottom: 60rpx !important;
								position: relative;
								padding: 0 !important;
								margin-right: 56rpx;
								margin-bottom: 10rpx;
							}
						}

						.works {
							flex-wrap: wrap;

							.item {}
						}
					}


					.shops-info {
						padding: 20rpx 0 0rpx 0;
						position: relative;
						flex: 1;

						.title {
							font-size: 32rpx;
							color: #3B3B3B;
							position: absolute;
							top: 30rpx;
						}

						/deep/ .swiper {
							height: 570rpx !important;
							background: #FFFFFF;
							border-radius: 32rpx;
							padding-top: 80rpx;

							.uni-swiper-wrapper {
								overflow: inherit;
							}

							uni-swiper-item {
								width: 486rpx !important;
								padding-right: 20px;
								height: 500rpx !important;
								uni-image {
									margin-right: 20px;
									width: 486rpx;
									height: 354rpx;
									border-radius: 32rpx !important;
								}

								.shops-msg {
									padding: 20rpx 24rpx 38rpx 24rpx;
									border-radius: 32rpx !important;
									display: flex;
									align-items: flex-end;
									justify-content: space-between;
									box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(64, 75, 99, 0.03);

								}
							}

							.uni-swiper-dots {
								right: -245rpx;
								transform: inherit;
								bottom: inherit;
								margin-top: -30px;
								z-index: 999;
								position: absolute;
							}
						}

						.best-title {
							color: #3B3B3B;
							font-size: 32rpx;
							margin: 56rpx 0;
							display: block;
						}


						.box {
							.left {
								uni-text {
									display: block;


									&:nth-child(1) {
										font-size: 36rpx;
										color: #02010E;
										white-space: nowrap;
										overflow: hidden; //文本超出隐藏
										text-overflow: ellipsis; //文本超出省略号替代
										width: 380rpx;

									}

									&:nth-child(2) {
										display: block;
										font-size: 30rpx;
										color: #6A6A6A;
										padding: 5rpx 0;
										white-space: nowrap;
										overflow: hidden; //文本超出隐藏
										text-overflow: ellipsis; //文本超出省略号替代
										width: 486rpx;
									}

									&:nth-child(3) {
										font-size: 36rpx;
										color: #02010E;
									}
								}

								.desc {
									white-space: nowrap;
									overflow: hidden; //文本超出隐藏
									text-overflow: ellipsis; //文本超出省略号替代
									width: 350rpx;
								}
							}

							.right {
								uni-text {
									display: block;
									width: 60rpx;
									height: 60rpx;
									background: #1B1D29;
									border-radius: 14rpx;
									display: flex;
									justify-content: center;
									align-items: center;
								}
							}
						}


					}

					.tabs {
						flex: 1;
						display: flex;
						flex-direction: column;
						overflow-y: scroll;
						margin-bottom: 20rpx;
					}

					.works {
						// display: flex;
						display: grid;
						grid-template-columns: repeat(3, 1fr);

						.item {
							margin-bottom: 10rpx;

							&:nth-child(3n+1),
							&:first-child {
								justify-self: start;
							}

							&:nth-child(3n-1) {
								justify-self: center;
							}

							&:nth-child(3n) {
								justify-self: end;
							}

						}
					}
				}

				/deep/ .u-avatar__level {
					.u-icon__img {
						width: 34px !important;
					}
				}
			}
		}

		.empty {
			top: 18%;
			width: 100%;

			uni-image {
				width: 100%;
			}

			uni-text {
				display: block;
				text-align: center;
				color: #666666;
				font-size: 26rpx;
			}

			uni-button {
				left: 0;
				margin-top: 40rpx;
				width: 100%;
				height: 120rpx;
				background: #2934D0;
				border-radius: 20rpx;
				transform: translateX(-50%);
				left: 50%;
			}
		}

		.emptyDynamic {
			position: absolute;

			uni-button {
				position: fixed;
				bottom: 40rpx;
				width: 90%;
				margin-top: 0;
			}

		}
	}

	/deep/ .container-box {
		padding: 0;
	}
</style>